<template>
	<view class="container">
		<view class="header">
			<text class="header-title">启动日志</text>
		</view>
		
		<view class="log-section">
			<view class="log-list">
				<view v-for="(log, index) in logItems" 
					:key="index" 
					class="log-item"
					:class="{'log-item-success': log.includes('成功') || log.includes('完成'),
							'log-item-info': log.includes('状态') || log.includes('表:')}"
				>
					<text class="log-number">#{{index + 1}}</text>
					<text class="log-text">{{log}}</text>
				</view>
			</view>
		</view>

		<view class="action-buttons">
			<button class="btn btn-primary" @click="appendUser">设置一行数据</button>
			<button class="btn btn-secondary" @click="getUserList">获取用户列表</button>
		</view>

		<view class="user-list">
			<view class="user-card" v-for="item in info.userList" :key="item.id">
				<view class="user-info">
					<text class="user-id">#{{ item.id }}</text>
					<text class="user-name">{{ item.name }}</text>
					<text class="user-age">{{ item.age }} 岁</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, computed } from 'vue';
    import { onLoad } from '@dcloudio/uni-app'
    import dbUtils from '@/utils/dbUtils.js'
    import { requestPermission, appendStorageInfo, getAppendStorageInfo } from '@/utils/common.js'
	const dbName = 'erp_main'
    const dbPath = '_doc/erp_main.db'
	const info = reactive({
		userList: '',
		logs: ''
	})
	const initLoad = async () => {
		appendStorageInfo(`准备初始化/`, 1)
		await getPermission();
		dbUtils.init(dbName,dbPath);
		const openStatus = dbUtils.isOpen();
		appendStorageInfo(`数据库当前状态：${openStatus ? 'Open' : 'Close'}/`)
		if(!openStatus){
			await dbUtils.openDb()
		}
		let isCreateTable = uni.getStorageSync('isCreateTable');
		appendStorageInfo(`判断是否要建表：${isCreateTable == 1 ? '否' : '是'}/`)
		if(isCreateTable !== "1"){
			// 创建表
			appendStorageInfo('开始创建表/')
			await createBaseTable();
			appendStorageInfo('表创建完成/')
			uni.setStorageSync('isCreateTable', "1");
		}else{
			const info = await dbUtils.getAllTableNames();
			appendStorageInfo('当前所有表:' + JSON.stringify(info) + '/')
		}
		getUserList();
	}
	const getUserList = async () => {
		info.logs = getAppendStorageInfo()
		let resultList = await dbUtils.findAll("kw_user",['id', 'name', 'age'], null);
		info.userList = resultList;
		
	}
	const appendLog = (log) => {
		info.logList.push(log);
	}
	const createBaseTable = async () => {
		await dbUtils.executeSql([
			`DROP TABLE IF EXISTS "kw_user"`,
			`CREATE TABLE "kw_user" (
			  "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
			  "name" TEXT,
			  "age" INTEGER DEFAULT 0
			)`
		]);
	}
	const appendUser = async () => {
		const roundNum = Math.floor(Math.random() * 1000);
		await dbUtils.insert('kw_user', {
			name: '张三' + roundNum,
			age: roundNum
		});
		uni.showToast({
			title: '设置成功',
			icon: 'success'
		})
		getUserList()
	}
    // 获取权限
	const getPermission = () => {
		return new Promise((resolve, reject) => {
			let permissionArr = ['android.permission.ACCESS_FINE_LOCATION', 'android.permission.WRITE_EXTERNAL_STORAGE'];
			requestPermission(permissionArr).then(res => {
				if(res.length > 0){
					uni.showModal({
						title: 'Tips',
						content: 'Please go to the system permission settings page to open it',
						success: (res) => {
							resolve();
						}
					});
				}else{
					resolve();
				}
			})
		})
	}
	const logItems = computed(() => {
		if (!info.logs) return [];
		return info.logs.split('/').filter(log => log.trim());
	})
	onLoad(() => {
		initLoad();
	})
</script>

<style>
.container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: 100vh;
	margin: 0 auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* Tablet and larger screens */
@media screen and (min-width: 960px) {
	.container {
		max-width: 960px;
		padding: 32px;
	}

	.action-buttons {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.user-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
		gap: 16px;
	}
}

.header {
	margin-bottom: 24px;
}

.header-title {
	font-size: 24px;
	font-weight: 600;
	color: #2c3e50;
}

.log-section {
	background-color: #ffffff;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 24px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	max-width: 100%;
	overflow-x: auto;
}

.log-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.log-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	background-color: #f8f9fa;
	transition: all 0.2s ease;
	word-break: break-word;
}

.log-item:hover {
	transform: translateX(4px);
}

.log-number {
	font-size: 12px;
	color: #95a5a6;
	min-width: 24px;
	flex-shrink: 0;
}

.log-text {
	color: #2c3e50;
	font-size: 14px;
	line-height: 1.4;
	flex: 1;
}

.log-item-success {
	background-color: #e8f6ef;
	border-left: 3px solid #2ecc71;
}

.log-item-info {
	background-color: #e9f2fb;
	border-left: 3px solid #3498db;
}

.action-buttons {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.btn {
	flex: 1;
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	border: none;
	white-space: nowrap;
}

.btn-primary {
	background-color: #3498db;
	color: white;
}

.btn-secondary {
	background-color: #2ecc71;
	color: white;
}

/* Mobile styles */
@media screen and (max-width: 959px) {
	.user-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
}

.user-card {
	background-color: white;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	height: 100%;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.user-id {
	color: #95a5a6;
	font-size: 14px;
	min-width: 40px;
	flex-shrink: 0;
}

.user-name {
	color: #2c3e50;
	font-size: 16px;
	font-weight: 500;
	flex: 1;
	min-width: 120px;
}

.user-age {
	color: #7f8c8d;
	font-size: 14px;
	background-color: #f8f9fa;
	padding: 4px 8px;
	border-radius: 4px;
	flex-shrink: 0;
}
</style>
